<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!-- <link rel="icon" href="../../../../favicon.ico"> -->
	<title>Soda-student</title>
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/index.css" rel="stylesheet">
	<link href="css/open-iconic-bootstrap.min.css" rel="stylesheet">
</head>

<body>
	<!-- 创建请求模态框 -->
	<div class="modal fade" id="createReqModal" tabindex="-1" role="dialog" aria-labelledby="createReqModalLabel"
		aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="createReqModalLabel">创建申请</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<form>
						<div class="form-group">
							<label for="recipient-name" class="col-form-label">Recipient:</label>
							<input type="text" class="form-control" id="recipient-name">
						</div>
						<div class="form-group">
							<label for="message-text" class="col-form-label">Message:</label>
							<textarea class="form-control" id="message-text"></textarea>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary">提交</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 模态框结束 -->

	<!-- 导航栏 -->
	<nav class="navbar navbar-dark bg-primary text-white">
		<div class="container">
			<span class="navbar-brand mb-0 h1">Soda student</span>
			<div class="dropdown">
				<a class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown">
					欢迎, Mark&nbsp;
					<span class="oi oi-menu"></span>
				</a>
				<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown">
					<a class="dropdown-item" href="#">
						<span class="oi oi-pencil"></span> &nbsp;
						密码修改
					</a>
					<a class="dropdown-item" href="#">
						<span class="oi oi-account-logout"></span> &nbsp;
						退出登录
					</a>
				</div>
			</div>
		</div>
	</nav>
	<!-- 导航栏结束 -->

	<!-- 主要内容 -->
	<div class="container">
		<div class="row">

			<!-- 数据统计 -->
			<div class="col-md-3 fix-padding">
				<div class="card">
					<div class="card-header bg-primary text-white">
						数据统计
					</div>
					<ul class="list-group list-group-flush">
						<li class="list-group-item d-flex justify-content-between align-items-center">
							Cras justo odio
							<span class="badge badge-secondary badge-pill">1</span>
						</li>
						<li class="list-group-item d-flex justify-content-between align-items-center">
							Dapibus ac facilisis in
							<span class="badge badge-secondary badge-pill">14</span>
						</li>
						<li class="list-group-item d-flex justify-content-between align-items-center">
							Vestibulum at eros
							<span class="badge badge-secondary badge-pill">140</span>
						</li>
					</ul>
				</div>
			</div>
			<!-- 数据统计结束 -->

			<!-- 请求列表 -->
			<div class="col-md-9 fix-padding">

				<!-- 当前请求列表 -->
				<div class="card">
					<div class="card-body">
						<h5 class="card-title">Current request list</h5>
						<table class="table">
							<thead>
								<tr>
									<th scope="col">Name</th>
									<th scope="col">Kind</th>
									<th scope="col">Checker</th>
									<th scope="col">Status</th>
									<th scope="col">Option</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>Mark</th>
									<td>Otto</td>
									<td>待定</td>
									<td>
										<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning"
											role="progressbar">
											待审核
										</div>
									</td>
									<td>admin</td>
								</tr>
								<tr>
									<td>Jacob</th>
									<td>Thornton</td>
									<td>admin</td>
									<td>
										<div class="progress-bar bg-success" role="progressbar">
											通过
										</div>
									</td>
									<td>admin</td>
								</tr>
								<tr>
									<td>Larry</th>
									<td>the Bird</td>
									<td>admin</td>
									<td>
										<div class="progress-bar progress-bar-striped bg-danger" role="progressbar">
											拒绝
										</div>
									</td>
									<td>admin</td>
								</tr>
							</tbody>
						</table>
						<a href="#" class="btn btn-sm btn-primary float-right" data-toggle="modal"
							data-target="#createReqModal">
							<span class="oi oi-plus" aria-hidden="true"></span>
							创建申请
						</a>
					</div>
				</div>
				<!-- 当前请求结束 -->

				<!-- 过去请求列表 -->
				<div class="card">
					<div class="card-body">
						<h5 class="card-title">Old request list</h5>
						<table class="table">
							<thead>
								<tr>
									<th scope="col">Name</th>
									<th scope="col">Kind</th>
									<th scope="col">Checker</th>
									<th scope="col">Status</th>
									<th scope="col">Option</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>Jacob</th>
									<td>Thornton</td>
									<td>admin</td>
									<td>
										<div class="progress-bar bg-success" role="progressbar">
											通过
										</div>
									</td>
									<td>admin</td>
								</tr>
								<tr>
									<td>Larry</th>
									<td>the Bird</td>
									<td>admin</td>
									<td>
										<div class="progress-bar progress-bar-striped bg-danger" role="progressbar">
											拒绝
										</div>
									</td>
									<td>admin</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<!-- 过去请求结束 -->
			</div>
			<!-- 请求列表结束 -->
		</div>
	</div>
	<!-- 主要内容结束 -->

	<!-- 页脚 -->
	<footer class="footle bg-white">
		<div class="container">
			<span class="text-muted">&copy; 2019</span>
		</div>
	</footer>
	<!-- 页脚结束 -->

	<script src="js/jquery.min.js"></script>
	<script src="js/popper.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
</body>

</html>